<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">
        <div>
            <form id="search-form"
                  class="layui-form layui-form-pane"
                  lay-filter="search-form">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <input type="text" name="keyword"
                                   placeholder="名称、车牌、拼音"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="provinceId" lay-filter="searchProvinceId" lay-search>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <div class="layui-input-inline">
                            <select name="cityId" lay-search>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="button"
                                id="reset-btn"
                                class="layui-btn layui-btn-warm">
                            <i class="layui-icon layui-icon-refresh"></i> 重 置 </button>
                        <button type="submit"
                                id="search-btn"
                                class="layui-btn layui-btn-normal"
                                lay-submit lay-filter="search-btn">
                            <i class="layui-icon layui-icon-search"></i> 搜 索 </button>
                    </div>
                </div>
            </form>
        </div>

        <table class="layui-hide" id="data-table" lay-filter="data-table"></table>

        <script type="text/html" id="data-toolbar">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn"
                        lay-event="add" id="add-btn"> 添加 </button>
                <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn layui-btn-disabled"
                        lay-event="remove" id="remove-btn"> 删除 </button>
            </div>
        </script>

        <script type="text/html" id="data-tool">
            <a class="layui-btn layui-btn-xs"
               lay-event="route">路线图</a>
            <a class="layui-btn layui-btn-normal layui-btn-xs"
               lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger"
               lay-event="remove">删除</a>
        </script>
    </div>
</div>

<script>
    class ExamPlacePage extends ListPage {
        constructor() {
            super({
                title: '考场',
                uri: 'examPlaces',
                cols: [[
                    {type: 'checkbox', align: 'center'},
                    {field: 'name', title: '名称', align: 'center'},
                    {field: 'address', title: '地址', align: 'center'},
                    {title: '操作', minWidth: 150, toolbar: '#data-tool', align: "center"}
                ]],
                saveUri: 'examPlaces/save',
                removeUri: 'examPlaces/remove',
                savePageUri: 'page/exam/examPlace/save.html'
            })
        }

        _tool(obj) {
            if (obj.event === 'route') {
                this._route(obj)
            } else {
                super._tool(obj)
            }
        }

        _route(obj) {
            Layers.openUri('page/common/fileInput.html', {
                title: '路线图',
                success: () => {
                    console.log('打开成功', obj)

                    // 初始化上传组件
                    new FileInput({
                        selector: '#upload-file',
                        name: 'files',
                        accept: 'image/*',
                        multiple: true,
                        preview: []
                    })
                }
            });
        }

        _initSearchForm() {
            super._initSearchForm()

            this._loadRegions(this._searchForm)
        }

        _initSaveForm() {
            super._initSaveForm()

            this._loadRegions(this._saveForm)
        }

        _loadRegions(form) {
            if (this._regions) {
                this._initRegions(form)
                return
            }
            Ajaxs.get({
                uri: 'plateRegions/regions',
                success: (response) => {
                    this._regions = response.data
                    this._initRegions(form)
                }
            })
        }

        _initRegions(form) {
            // 数据初始化函数
            const build = (o) => {
                return {
                    val: o.data.id,
                    text: o.data.plate
                        ? `【${o.data.plate}】${o.data.name}`
                        : o.data.name
                }
            }

            // 城市
            const citySelect = new Select({
                name: 'cityId',
                form: form
            })

            // 省份
            const provinceSelect = new Select({
                name: 'provinceId',
                form: form,
                change: (o) => { // 切换省份
                    // 设置当前省份对应的城市数据
                    citySelect.data(o.data.children, build)
                }
            })

            // 处理的提前处理
            let data = this._regions
            if (form === this._searchForm) {
                data = Commons.deepCopy(data)
                data.unshift({
                    name: '所有省份',
                    children: []
                })
                // 往每个省份的children前面插入一个【所有城市】
                for (const province of data) {
                    province.children.unshift({
                        name: '所有城市'
                    })
                }
                /*
                data = [
                    {name: '所有省份', children: [
                        {name: '所有城市'}
                    ]},
                    {id: 11, name: '广东', plate: '粤', children: [{
                        {name: '所有城市'},
                        {id: 22, name: '广州', plate: 'A'}
                    }]},
                    {id: 11, name: '广东', plate: '粤', children: [{
                        {name: '所有城市'},
                        {id: 22, name: '广州', plate: 'A'}
                    }]},
                ]
                 */
            }

            // 设置省份数据
            provinceSelect.data(data, build)

            // 编辑
            if (this._editData) {
                provinceSelect.val(this._editData.provinceId)
                citySelect.val(this._editData.cityId)
            }
        }
    }

    new ExamPlacePage()
</script>